<template>
  <div class="position-container">
    <!-- 左侧菜单 -->
    <side-menu></side-menu>
    
    <div class="main-content">
      <!-- 顶部导航 -->
      <top-header></top-header>
      
      <!-- 内容区域 -->
      <div class="content">
        <!-- 基本信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <div class="title">人员基本情况</div>
            <div class="actions">
              <el-button size="small">编辑</el-button>
              <el-button size="small" type="primary">保存</el-button>
            </div>
          </div>
          <div class="info-content">
            <div class="info-item">
              <i class="el-icon-office-building"></i>
              <span>市场经营部</span>
            </div>
            <div class="info-item">
              <i class="el-icon-user"></i>
              <span>市场经营统筹主管</span>
            </div>
            <div class="info-item">
              <i class="el-icon-user"></i>
              <span>张晓明</span>
            </div>
            <div class="info-item">
              <i class="el-icon-data-line"></i>
              <span>月KPI得分：1,234</span>
            </div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="charts-row">
          <div class="chart-card">
            <div class="card-header">
              <span>提现模：新发展套餐</span>
              <div class="actions">
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <development-chart></development-chart>
          </div>
          
          <div class="chart-card">
            <div class="card-header">
              <span>提现模：高迁套餐</span>
              <div class="actions">
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
              </div>
            </div>
<!--            <high-level-chart></high-level-chart>-->
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="tools-grid">
          <div v-for="tool in tools" :key="tool.id" class="tool-item">
            <i :class="tool.icon"></i>
            <span>{{ tool.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu'
import TopHeader from '@/components/TopHeader'
import DevelopmentChart from '@/components/charts/DevelopmentChart'

export default {
  name: 'PositionView',
  
  components: {
    SideMenu,
    TopHeader,
    DevelopmentChart,
  },
  
  data() {
    return {
      tools: [
        { id: 1, name: '重点场景', icon: 'el-icon-office-building' },
        { id: 2, name: '岗位KPI', icon: 'el-icon-data-line' },
        { id: 3, name: '经分大模型', icon: 'el-icon-share' },
        { id: 4, name: '调研报告', icon: 'el-icon-document' },
        { id: 5, name: '一键脱敏', icon: 'el-icon-lock' },
        { id: 6, name: '指标库', icon: 'el-icon-collection' }
      ]
    }
  }
}
</script>

<style scoped>
.position-container {
  display: flex;
  height: 100%;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  overflow-y: auto;
}

.info-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.tool-item {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.tool-item i {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style> 